<template>
  <div class="app-container">
    <el-container>
      <el-header>
        <p>一级菜单/二级菜单/</p>
        <p>三级菜单</p>
      </el-header>
      <el-main>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="店铺名称">
            <el-input v-model="shopname" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="行业">
            <el-select v-model="formInline.region" placeholder="请选择">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryShops">查询</el-button>
            <el-button @click="getTables">重置</el-button>
          </el-form-item>
        </el-form>
        <div class="main">
          <el-alert
            title="审核店铺，店铺审核通过之后，店铺即可在线上上线运营，平台将正式开始对店铺进行管理"
            type="info"
            effect="dark"
          >
          </el-alert>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column label="店铺编号" prop="id"> </el-table-column>
            <el-table-column label="店铺名称" prop="shopname">
            </el-table-column>
            <el-table-column label="店铺行业" prop="shopindustry">
            </el-table-column>
            <el-table-column label="店铺地址" prop="shopaddress">
            </el-table-column>
            <el-table-column label="联系电话" prop="mobilephone">
            </el-table-column>
            <el-table-column label="推广人ID" prop="promotersID">
            </el-table-column>
            <el-table-column label="状态" prop="states"> </el-table-column>
            <el-table-column label="备注" prop="name"> </el-table-column>
            <el-table-column label="操作" align="center" prop="name">
              <template #default="{ row }">
                <el-button type="text" size="mini" @click="editMaterial(row)"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              :current-page="page.page"
              :page-sizes="[10, 20]"
              :page-size="page.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.page.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { getTables } from '@/views/audit/table';
import { getTotal } from '@/views/audit/table';
import { queryShop } from '@/views/audit/table';
import { editMaterial } from '@/views/audit/table';

export default {
  name: 'kkk',
  data() {
    return {
      input: '',
      formInline: {
        user: '',
        region: '',
      },
      shopname: '',
      tableData: [],
      search: '',
      page: {
        total: 0,
        page: 1, //当前页面
        size: 5,
      },
    };
  },

  created() {
    this.getTables();
    this.getTotal();
  },
  methods: {
    // 编辑素材
    async editMaterial() {
      const { data } = await editMaterial()
      console.log(data);
    },
    // 获取列表数据
    async getTables() {
      const { data } = await getTables(this.page);
      console.log(data);
      this.tableData = data;
      // this.total = data.length;
      // console.log(total);
    },
    // 分页功能
    async getTotal() {
      const { data } = await getTotal();
      this.data = data;
      this.page.total = data.length;
      console.log(data.length);
    },
    onSubmit() {
      console.log('submit!');
    },
    async queryShops() {
      if (this.shopname) {
        console.log(111);
        const { data } = await queryShop({ shopname: this.shopname });
        this.tableData = data;
      } else {
        this.getTables()
      }
    },
    handleEdit(row) {
      console.log(row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      this.page.size = val;
      this.getTables();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.getTables();
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss">
.app-container {
  background-color: #f0f2f5;
  width: 100%;
  height: 100%;
  .el-container {
    height: 685px;
    .el-header {
      background-color: #fff;
      margin-bottom: 20px;
      height: 40px !important;
      font-size: 13px;
      p {
        float: left;
      }
    }
    .el-main {
      background-color: #fff;
      p {
        float: left;
        font-size: 14px;
        font-weight: 0;
        margin: 0;
        line-height: 25px;
      }
      .el-input {
        width: 150px;
        .el-input__inner {
          height: 25px !important;
        }
      }
      .el-button {
        padding: 7px 10px;
      }
      .main {
        .el-alert {
          background-color: #e6f7ff;
          color: #51575a;
        }
      }
    }
  }
}
</style>
